<template>
	<span v-if="dot" :class="classes" ref="badge">
		<slot></slot>
		<span :class="dotClasses" :style="styles" v-show="badge"></span>
	</span>
	<span v-else-if="status || color" :class="classes" class="ivu-badge-status" ref="badge">
		<span :class="statusClasses" :style="statusStyles"></span>
		<span class="ivu-badge-status-text">
			<slot name="text">{{ text }}</slot>
		</span>
	</span>
	<span v-else :class="classes" ref="badge">
		<slot></slot>
		<span v-if="$slots['count']" :style="styles" :class="customCountClasses">
			<slot name="count"></slot>
		</span>
		<span v-else-if="hasCount" :style="styles" :class="countClasses" v-show="badge">
			<slot name="text">{{ finalCount }}</slot>
		</span>
	</span>
</template>

<script lang="ts">
	import Anes from "../base";
	import { oneOf } from "../../utils/assist";
	import { Prop, Component } from "vue-property-decorator";

	const initColorList = [
		"blue",
		"green",
		"red",
		"yellow",
		"pink",
		"magenta",
		"volcano",
		"orange",
		"gold",
		"lime",
		"cyan",
		"geekblue",
		"purple"
	];
	const prefixCls = "ivu-badge";
	@Component
	export default class Badge extends Anes {
		@Prop({ type: Number, default: 99 }) overflowCount!: number;
		@Prop() count!: number;
		@Prop({ type: Boolean, default: false }) dot!: boolean;
		@Prop({ type: Boolean, default: false }) showZero!: boolean;
		@Prop() className!: string;
		@Prop() text!: string;
		@Prop() color!: string;
		@Prop({
			type: String,
			default: "",
			validator(value) {
				return oneOf(value, [
					"success",
					"processing",
					"default",
					"error",
					"warning",
					""
				]);
			}
		})
		status!: string;
		@Prop({
			type: String,
			default: "",
			validator(value) {
				return oneOf(value, [
					"success",
					"primary",
					"normal",
					"error",
					"warning",
					"info",
					""
				]);
			}
		})
		type!: string;
		@Prop() offset!: Array<number>;

		get classes() {
			return `${prefixCls}`;
		}
		get dotClasses() {
			return `${prefixCls}-dot`;
		}
		get countClasses() {
			return [
				`${prefixCls}-count`,
				{
					[`${this.className}`]: !!this.className,
					[`${prefixCls}-count-alone`]: this.alone,
					[`${prefixCls}-count-${this.type}`]: !!this.type
				}
			];
		}
		get customCountClasses() {
			return [
				`${prefixCls}-count`,
				`${prefixCls}-count-custom`,
				{
					[`${this.className}`]: !!this.className
				}
			];
		}
		get statusClasses() {
			return [
				`${prefixCls}-status-dot`,
				{
					[`${prefixCls}-status-${this.status}`]: !!this.status,
					[`${prefixCls}-status-${this.color}`]:
						!!this.color && oneOf(this.color, initColorList)
				}
			];
		}
		get statusStyles() {
			return oneOf(this.color, initColorList)
				? {}
				: { backgroundColor: this.color };
		}
		get styles() {
			if (this.offset && this.offset.length === 2) {
				return {
					"margin-top": `${this.offset[0]}px`,
					"margin-right": `${this.offset[1]}px`
				};
			}
			return {};
		}
		get finalCount() {
			if (this.text) return this.text;
			return this.count >= this.overflowCount
				? `${this.overflowCount}+`
				: `${this.count}`;
		}
		get badge() {
			let status = false;

			if (this.count) {
				status = !(this.count === 0);
			}

			if (this.dot) {
				status = true;
				if (this.count !== null) {
					if (this.count === 0) {
						status = false;
					}
				}
			}

			if (this.text !== "") status = true;

			return status || this.showZero;
		}
		get hasCount() {
			if (this.count || this.text !== "") return true;
			if (this.showZero && this.count === 0) return true;
			else return false;
		}
		get alone() {
			return this.$slots.default === undefined;
		}
	}
</script>

<style>
</style>